<template>
  <div>
    <m-card :icon="icon" :title="title">
      <div class="nav jc-between mb-2">
        <div
          class="nav-item mt-2 pb-1"
          v-for="(item,i) in categories"
          :key="i"
          :class="{active:active===i}"
          @click="$refs.list.swiper.slideTo(i)"
        >
          <div class="nav-link fs-sm">{{item.name}}</div>
        </div>
      </div>

      <div>
        <swiper
          ref="list"
          :options="{autoHeight:true}"
          @slide-change="()=>active=$refs.list.swiper.realIndex"
        >
          <swiper-slide v-for="(category,index) in categories" :key="index">
            <slot name="category" :category="category"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data() {
    return {
      active: 0
    };
  }
};
</script>

<style>
</style>
